<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		*{
			padding: 0;
			margin: 0;
			line-height: 1;
		}
		img{
			max-width: 100%;
		}
		.playwindow{
			display: flex;
			width: 920px;
			margin: 100px auto;
			 -moz-user-select:none; /*火狐*/
			    -webkit-user-select:none; /*webkit浏览器*/
			    -ms-user-select:none; /*IE10*/
			    -khtml-user-select:none; /*早期浏览器*/
			    user-select:none;
		}
		.playwindow.fullscreen{
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 50;
			margin: 0;
		}
		/* 播放器容器 */
		.playbox{
			background: #000;
			width: 600px;
			padding: 40px 10px 0 10px;
		}
		/* 电影模式 */
		.fullback.movie{
			position: fixed;
			background: #000;
			left: 0;
			top: 0;
			z-index: 100;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			transition: all 1s;
		}
		/* 小窗口模式 */
		.videobox.small{
			position: fixed;
			border: solid 5px #666;
			border-radius: 5px;
			z-index: 99;
			position: fixed;
			right: 10px;
			bottom: 50px;
		}
		.videobox{
			position: relative;
		}
		.videobox video{
			width: 100%;
			object-fit: cover;
		}
		/* 进度条 */
		.progress{
			width: 600px;
			height: 3px;
			background: #999;
			border-radius: 3px;
			overflow: hidden;
			position: relative;
			cursor: pointer;
		}
		.progress .now{
			position: absolute;
			left: 0;
			top: 0;
			width: 0;
			height: 100%;
			background: #333;
			transition: all .5s linear;
		}
		/* 控件区 */
		.consoles{
			display: flex;
			justify-content: space-between;
			height: 45px;
			font-size: 14px;
			color: #fff;
		}
		.group1,.group2{
			display: flex;
			padding: 10px;
			align-items: center;
		}
		.group1>*{
			margin-right: 10px;
		}
		.group2>*{
			margin-left: 10px;
		}
		/* 全屏按钮 */
		.fullscreen{
			width: 25px;
			cursor: pointer;
		}
		/* 电影按钮 */
		.movie{
			width: 22px;
			height: 16px;
			border: solid 2px #fff;
			border-radius: 5px;
			cursor: pointer;
		}
		/* 播放/暂停 */
		.play{
			width: 25px;
			height: 25px;
			background: url(play.svg) no-repeat center/100%;
			cursor: pointer;
		}
		.play.pause{
			background-image: url(pause.svg);
		}
		/* 视频上播放/暂停 */
		.videobox.show-play .video-play{
			display: flex;
		}
		.video-play{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 5;
			align-items: center;
			justify-content: center;
			display: none;
			cursor: pointer;
		}
		.video-play p{
			width: 50px;
			height: 50px;
			border-radius: 50%;
			overflow: hidden;
			background: #fff url(play.svg) no-repeat center/60%;
		}
		.videobox.pause .video-play p{
			background-image: url(pause.svg);
		}
		/* 停止 */
		.stop{
			width: 18px;
			height: 16px;
			background: #fff;
			cursor: pointer;
		}
		/* 倍速 */
		.speed-box{
			position: relative;
			
		}
		.speed-box .speed-list{
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 80px;
			display: none;
			padding-bottom: 32px;
		}
		.speed-box:hover .speed-list{
			display: block;
		}
		.speed-box .speed-content{
			border: solid 1px #333;
			background: #000;
		}
		.speed-box .speed-content div{
			line-height: 30px;
			text-align: center;
			cursor: pointer;
		}
		.speed-box .speed-content div:hover{
			background: rgba(255,255,255,.6);
		}
		/* 音量 */
		.volume{
			display: flex;
			align-items: center;
		}
		.volume .muted{
			width: 25px;
			height: 25px;
			background: url(volume.svg) no-repeat 0 center/100%;
			cursor: pointer;
		}
		.volume.active .muted{
			background-image: url(volume_off.svg);
		}
		.volume .volume-change{
			width: 60px;
			height: 4px;
			background: #ccc;
			border-radius: 4px;
			position: relative;
		}
		.volume .vnow{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: orangered;
			border-radius: 4px;
		}
		.volume .v-slider{
			position: absolute;
			left: 54px;
			top: 50%;
			transform: translateY(-50%);
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: darkgoldenrod;
			cursor: pointer;
			z-index: 5;
		}
		.volume .v-slider:after{
			content: "";
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: #000;
		}
		.volume .volume-box{
			position: relative;
			display: flex;
			align-items: center;
			height: 12px;
			width: 66px;
		}
		.volume  .show-value{
			position: absolute;
			left: 0;
			bottom: 100%;
			font-size: 12px;
			color: #fff;
			text-align: center;
			width: 100%;
			display: none;
		}
	</style>
</head>
<body>
	<div class="playwindow">
		<div class="fullback">
			<div class="playbox">
				<!-- 视频层 -->
				<div class="videobox">
					<video src="./video.mp4" class="my-video" width="600"></video>
					<!-- 视频上播放/暂停 -->
					<div class="video-play" title="播放"><p></p></div>
				</div>
				<!-- 进度条层 -->
				<div class="progress" title="">
					<!-- 播放实时的进度条 -->
					<div class="now"></div>
				</div>
				<!-- 控件层 -->
				<div class="consoles">
					<!-- 左侧 -->
					<div class="group1">
						<!-- 播放/暂停 -->
						<div class="play" title="播放"></div>
						<!-- 停止 -->
						<div class="stop" title="停止"></div>
						<!-- 时长 -->
						<div class="time">
							<span class="ctime">00:00</span> / <span class="dtime">00:00</span>
						</div>
					</div>
					<!-- 右侧 -->
					<div class="group2">
						<!-- 倍速 -->
						<div class="speed-box">
							<div class="cur-speed">倍速</div>
							<div class="speed-list">
								<div class="speed-content">
									<div value="2">2.0x</div>
									<div value="1.5">1.5x</div>
									<div value="1.25">1.25x</div>
									<div value="1">1.0x</div>
									<div value="0.75">0.75x</div>
									<div value="0.5">0.5x</div>
								</div>
							</div>
						</div>
						<!-- 音量 -->
						<div class="volume">
							<div class="muted" title="静音"></div>
							<div class="volume-box">
								<!-- 显示音量值 -->
								<div class="show-value">100%</div>
								<div class="v-slider"></div>
								<div class="volume-change">
									<div class="vnow"></div>
								</div>
							</div>
						</div>
						<!-- 电影模式 -->
						<div class="movie" title="电影模式"></div>
						<!-- 全屏 -->
						<div class="fullscreen" title="全屏"><img src="fullscreen.svg" alt=""></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div style="height: 1500px;"></div>
	
	<!-- js -->
	<script>
		// 获取对象
		function getObj(tag) {
			return document.querySelector(tag);
		}
		
		// 视频对象
		var v = getObj('.my-video');
		var vWidth = 600; // 视频宽度，根据需要调整
		var minWidth = 500; // 视频窗口最小宽度
		var maxWidth = 1400; // 视频窗口最多宽度
		var WaH; // 视频宽高比
		var isSmall = false; // 是否处于窗口模式
		var smallWidth = 300; // 小窗口宽度
		var isMoive = false; // 是否为电影模式
		var haveHour = false; // 时长是否大于1小时
		var timer; // 动态时长定时器
		var progressWidth = 600; // 进度条宽度
		var volumeWidth = 60; // 音量条宽度
		var curPos = 60; // 音条当前位置
		var halfSlider = 6; // 半个滑块的宽度
		
		
		// 设置各元素大小
		function setSize() {
			var spaceW = 60;
			// var width = document.body.clientWidth - spaceW;
			var width = 800 - spaceW;
			if(width < minWidth+spaceW) {
				width = minWidth+spaceW;
			}else if(width > maxWidth+spaceW) {
				width = maxWidth+spaceW;
			};
			var height = width / WaH;
			v.width = width;
			v.height = height;
			progressWidth = width;
			// 设置宽/高度
			getObj('.playwindow').style.width = width + 20 + 'px';
			getObj('.playbox').style.width = width + 'px';
			getObj('.playbox').style.height = height + 48 + 'px';
			getObj('.progress').style.width = width + 'px';
			getObj('.videobox').style.width = width + 'px';
			getObj('.videobox').style.height = height + 'px';
		}
		
		// 视频就绪事件
		v.oncanplay = function() {
			// 这里可以初始化时长
			// v.currentTime = that.lastPro;
			WaH = v.clientWidth / v.clientHeight; // 宽高比
			setSize();
			// 获取视频总时长
			console.log(v)
			var darution = v.duration;
			haveHour = darution >= 3600;
			getObj('.dtime').innerHTML = makeTime(darution);
		}
		
		// resize事件
		window.addEventListener('resize', function() {
			// 当非窗口模式时才启用
			if(!isSmall) {
				setSize();
			}
		})
		
		// 设置小窗口
		function setSmall() {
			var videobox = getObj('.videobox');
			// 如果处于小窗口返回
			if(isSmall) return;
			isSmall = true;
			var height = smallWidth / WaH;
			v.width = smallWidth;
			v.height = height;
			videobox.classList.add('small');
			videobox.style.width = smallWidth + 'px';
			videobox.style.height = height + 'px';
			
			// 鼠标悬停显示播放/暂停按钮
			if(v.paused) {
				videobox.classList.add('show-play');
			}
			videobox.onmouseenter = function() {
				if(isSmall) {
					videobox.classList.add('show-play');
				}
			}
			videobox.onmouseleave = function() {
				if(isSmall && !v.paused) {
					videobox.classList.remove('show-play');
				}
			}
		}
		
		// 取消小窗口
		function exitSmall() {
			if(!isSmall) return;
			isSmall = false;
			getObj('.videobox').classList.remove('small');
			// 重新设置大小
			setSize();
		}
		
		// 监听窗口滚动
		window.addEventListener('scroll', function() {
			var height = parseInt(getObj('.playbox').style.height) + getObj('.playbox').offsetTop;
			var top = document.documentElement.scrollTop;
			if(top > height - 50) {
				// 窗口模式
				setSmall();
			}else{
				// 退出窗口模式
				exitSmall();
			}
		})
		
		// 全屏
		getObj('.fullscreen').onclick = function() {
			if(v.requestFullscreen) {
				v.requestFullscreen();
			}else if(v.webkitRequestFullScreen) {
				v.webkitRequestFullScreen();
			}else if(v.mozRequestFullScreen) {
				v.mozRequestFullScreen();
			}
		}
		
		// 电影模式
		getObj('.movie').onclick = function() {
			var fullback = getObj('.fullback');
			if(isMoive) {
				// 退出电影模式
				fullback.classList.remove('movie');
				this.title = '电影模式';
			}else{
				// 电影模式
				fullback.classList.add('movie');
				this.title = '退出电影模式';
			}
			// 取非
			isMoive = !isMoive;
		}
		
		// 播放
		function play() {
			getObj('.play').classList.add('pause');
			getObj('.videobox').classList.add('pause');
			setTimeout(function() {
				getObj('.videobox').classList.remove('show-play');
			}, 500);
			// 实时时间
			timer = setInterval(function() {
				nowTime(); // 更新时长
				changePreGress(); // 更新进度条
			}, 1000)
			v.play();
		}
		
		// 暂停
		function pause() {
			getObj('.play').classList.remove('pause');
			getObj('.videobox').classList.remove('pause');
			getObj('.videobox').classList.add('show-play');
			// 清除之前定时器
			clearInterval(timer);
			v.pause();
		}
		
		// 播放暂停
		function playAndPause() {
				if(v.paused) {
					play();
					this.title = '暂停';
				}else{
					this.title = '播放';
					pause();
				}
		}
		
		// 点击播放/暂停
		getObj('.play').onclick = function() {
			playAndPause();
		}
		getObj('.video-play').onclick = function() {
			playAndPause();
		}
		
		// 停止
		function stoped() {
			pause();
			v.currentTime = 0;
			nowTime(); // 更新时长
			changePreGress(); // 更新进度条
		}
		
		// 点击"停止"
		getObj('.stop').onclick = function() {
			stoped();
		}
		v.onended = function() {
			stoped();
		}
		
		// 重新播放
		getObj('.videoReset').onclick = function() {
		  v.currentTime = 0;
		  nowTime(); // 更新时长
		  changePreGress(); // 更新进度条
		  play();
		}
		
		/**
		 * 把秒值转换为时：分：秒，
		 * 不超过一小时转为分：秒
		 */
		function makeTime(time) {
			time = Math.floor(time);
			var h = Math.floor(time / 3600);
			var m = Math.floor((time-h*3600)/60);
			var s = time-h*3600 - m*60;
			m = m < 10 ? '0' + m : m;
			s = s < 10 ? '0' + s : s;
			if(haveHour) {
				h = h < 10 ? '0' + h : h;
				return h + ':' + m + ':' + s;
			}
			return m + ':' + s;
		}
		
		// 当前播放的时间
		function nowTime() {
			getObj('.ctime').innerHTML = makeTime(v.currentTime);
		}
		
		// 根据播放时间调整进度条
		function changePreGress() {
			var cur = v.currentTime / v.duration * progressWidth;
			getObj('.now').style.width = cur + 'px';
		}
		
		// 点击修改进度
		getObj('.progress').onclick = function(e) {
			var e = e || window.event;
			if(v.currentTime <= 0) return;
			var cur = e.offsetX / progressWidth;
			v.currentTime = cur * v.duration;
			getObj('.now').style.width = (cur * v.duration) / v.duration * progressWidth + 'px';
		}
		
		//  鼠标悬停进度条显示时长
		getObj('.progress').onmouseenter = function(e) {
			if(v.currentTime <= 0) return;
			getObj('.progress').onmousemove = function(e) {
				var cur = e.offsetX / progressWidth;
				this.title = makeTime((cur * v.duration));
			}
		}
		
		// 点击倍速
		var speedBox = document.querySelectorAll('.speed-content div');
		for(var sp = 0; sp < speedBox.length; sp++) {
			speedBox[sp].onclick = function() {
				var isValue = this.getAttribute('value');
				getObj('.cur-speed').innerHTML = '倍速 ' + isValue + 'x';
				v.playbackRate = isValue;
			}
		}
		
		// 调整音量条位置
		function setPos(pos) {
			if(pos <= 0) {
				pos = 0;
			}else if(pos > volumeWidth){
				pos = volumeWidth;
			}
			getObj('.vnow').style.width = pos + 'px';
			getObj('.v-slider').style.left = (pos - halfSlider) + 'px';
			v.volume = pos / volumeWidth;
			// 显示音量百分比
			var voNum = pos / volumeWidth;
			voNum = Math.floor(Number(voNum.toFixed(2)) * 100);
			getObj('.show-value').style.display = 'block';
			getObj('.show-value').innerHTML = voNum + '%';
			
			// 音量值为0需要设置为禁音
			var volume = getObj('.volume');
			var muted = getObj('.muted');
			if(v.volume <= 0) {
				volume.classList.add('active');
				muted.title = '开启';
				v.muted = true;
			}else{
				volume.classList.remove('active');
				muted.title = '静音';
				v.muted = false;
			}
		}
		
		// 禁音点击
		getObj('.muted').onclick = function() {
			var muted = v.muted,
				volume = getObj('.volume');
			if(muted) {
				volume.classList.remove('active');
				this.title = '静音';
				if(curPos <= 0) {
					// 更新音量
					setPos(volumeWidth);
					curPos = volumeWidth;
				}else{
					// 更新音量
					setPos(curPos);
				}
				
				
			}else{
				volume.classList.add('active');
				this.title = '开启';
				curPos = 0;
				// 更新音量
				setPos(curPos);
			}
			v.muted = !muted;
		}
		
		// 拖动滑块调节音量
		var ls = 0;
		getObj('.v-slider').onmousedown = function(e) {
			var e = e || window.event;
			var x = e.clientX;
			getObj('.volume-box').onmousemove = function(ev) {
				var ev = ev || window.event;
				var mx = ev.clientX;
				ls = curPos - (x - mx);
				// 更新进度条
				setPos(ls);
			}
			document.onmouseup = function() {
				curPos = ls;
				getObj('.volume-box').onmousemove = null;
				setTimeout(function(){
					getObj('.show-value').style.display = 'none';
				}, 500);
			}
		}
	</script>
</body>
</html>